<template>
	<view class="shopcar">
		<view class="title">
			购物车
		</view>
		<view class="carList">
			<scroll-view class="carListScrollview" scroll-y="true" >
				<view class="carItem" v-for="(item,index) in cartList" :key="item.id">
						<image src="../../static/images/select.png" mode="" v-if="item.isSelected" @click="changeSelecte(item,false)"></image>
						<image src="../../static/images/unselected.png" mode="" v-else   @click="changeSelecte(item,true)"></image>
						<view class="goodItem">
							<image :src="item.primaryPicUrl" mode=""></image>
							<view class="goodsInfo">
								<view class="name">
									{{item.promotionDesc}}
								</view>
								<view class="price">
									￥  {{item.retailPrice}}
								</view>
								<view class="addview">
									<view class="reduce addBtn" @click="changeCount(false,index)">
										-
									</view>
									<view class="count">
										{{item.count}}
									</view>
									<view class="add addBtn" @click="changeCount(true,index)">
										+
									</view>
								</view>
							</view>
						</view>
						
					</view>
				
			</scroll-view>
		</view>
		<view class="bottom_view">
					<view class="chooseCount">
						<image src="../../static/images/select.png" mode=""></image>
						<view class="allcount">
							已选  {{allcount}}
						</view>
					</view>
					<view class="actionButtonView">
						<view class="all_price">
							合计: {{allPrice}}
						</view>
						<view class="add_car">
							下单
						</view>
					</view>
			</view>
		
	</view>
</template>

<script>
	import { mapMutations,mapState } from 'vuex';
	export default {
		data() {
			return {
				allPrice:0,
				allcount:0
			}
		},
		mounted() {
			
		},
		computed:{
			...mapState({
				cartList:(state) => state.cart.cartList
			}),
			
		},
		methods:{
			...mapMutations('cart',['changeCountMutation']),
			changeSelecte(item,isSelect){
				item.isSelected = isSelect
			},
			changeCount(isAdd,index){
				this.changeCountMutation({isAdd,index})
			}
		}
		
	}
</script>

<style lang="stylus">
	.shopcar
		background-color: #fff
		.title
			font-size: 32rpx
			margin: 20rpx 
			height: 40rpx
		.carList
			background: #fff
			height: calc(100vh - 200rpx)
			.carListScrollview
				height: 100%
				width: 100%
				.carItem
					width: 100%
					display: flex
					margin: 20rpx 0 
					align-items: center
					image
						width: 40rpx
						height: 40rpx
						margin-left: 20rpx
					.goodItem
						display: flex
						flex: 1
						margin-right: 20rpx
						image
							height: 170rpx
							width:170rpx
							margin:0 30rpx
						.goodsInfo
							position: relative
							margin-left: 10rpx
							flex: 1
							.name
								font-size: 32rpx
							.price
								font-size: 32rpx
								color: red
							.addview
								position: absolute
								bottom: 0rpx
								right: 0rpx
								display: flex
								align-items: center
								justify-content: flex-end
								.addBtn
									height: 40rpx
									width: 40rpx
									border: 1rpx solid #ccc
									text-align: center
								.count
									width: 80rpx
									height:40rpx
									line-height: 40rpx
									text-align: center
									border-top:  1rpx solid #ccc
									border-bottom:  1rpx solid #ccc
		.bottom_view
			background-color: #fff
			height: 120rpx
			width: 100%
			display: flex
			align-items: center
			justify-content: space-between
			border-top: 1px solid #ccc
			.chooseCount
				width: 180rpx
				display: flex
				align-items: center
				image
					width: 40rpx
					height: 40rpx
				.allcount
					font-size: 32rpx
					margin-left: 10rpx
			.actionButtonView
				height: 100%
				display: flex
				justify-content: space-around
				align-items: center
				.all_price
					height: 100%
					line-height: 120rpx
					width:240rpx
					text-align: center
				.add_car
					height: 100%
					line-height: 120rpx
					text-align: center
					width:240rpx
					background-color: red
					color: #fff
</style>
